import React, { ReactElement, useState, useEffect } from 'react'
import { Form, Row, Col, Input, Button, Table, Menu, Dropdown } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'umi';
interface Props {

}

export default function Charge({ }: Props): ReactElement {
    const dispatch = useDispatch();
    const chargeList = useSelector((state: any) => {
        return state.chargeModel.chargeList;
    })
    const chargeStatusCode = useSelector((state: any) => {
        return state.chargeModel.chargeStatusCode;
    });
    useEffect(() => {
        dispatch({
            type: 'chargeModel/getChargeBySaga',
            payload:{
                pageSize:100
            }
        })
    }, [chargeStatusCode])
    const [expand, setExpand] = useState(false);
    const [form] = Form.useForm();
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const onSelectChange = (selectedRowKeys: any) => {
        // console.log('selectedRowKeys changed: ', selectedRowKeys);
        setSelectedRowKeys(selectedRowKeys);
    }
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
        ],
    }
    const handleTableChange = (pagination: any) => {
        setPagination(() => pagination)
    }
    const [pagination, setPagination] = useState<any>(
        {
            current: 1,
            pageSize: 5,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: [3, 5, 7]
        }
    )
    const locales = { selectionAll: '全选所有', selectInvert: '反选当页', selectNone: '清空所有' }
    const columns: any = [
        {
            title: '充电站名称',
            dataIndex: 'shopName',
            align: 'center',
        },
        {
            title: '电话',
            dataIndex: 'tel',
            align: 'center',
        },
        {
            title: '地址',
            dataIndex: 'address',
            align: 'center',
        },
        {
            title: '身份证号',
            dataIndex: 'idCard',
            align: 'center',
        },
        {
            title: '负责人',
            dataIndex: 'managerName',
            align: 'center',
        },
        {
            title: '执照号',
            dataIndex: 'licenceNo',
            align: 'center',
        },
        {
            title: '状态',
            dataIndex: 'status',
            align: 'center',
        },
        {
            title: '执照图片',
            dataIndex: 'licenceImg',
            align: 'center',
            render: (text: any) => {
                return ((text) ? <img src={text.licenceImg} alt="" /> : '暂无图片')
            },
        },
        {
            title: '操作',
            align: 'center',
            render: (record: any) => {
                return (record.status == '审核中' ? <>
                    <Button type="primary" size='middle' style={{ marginRight: '10px' }} onClick={() => changeChargeStatus(record, '同意')}>
                        同意
                    </Button>
                    <Button type="default" size='middle' onClick={() => changeChargeStatus(record, '拒绝')}>
                        拒绝
                    </Button></> : null)
            },
        },
    ]
    const changeChargeStatus = (values: any, status: string) => {
        // console.log(values, status);
        const id = values.id
        const shopName = values.shopName
        const tel = values.tel
        const address = values.address
        const idCard = values.idCard
        const managerName = values.managerName
        const licenceNo = values.licenceNo
        const licenceImg = values.licenceImg
        const idCardImg = values.idCardImg
        dispatch({
            type: 'chargeModel/chargeStatusBySaga',
            payload: {
                id, shopName, tel, address, idCard, managerName, licenceNo, status, idCardImg, licenceImg
            }
        })

    }
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    }
    function handleMenuClick(e: any) {
        console.log('click', e);
    }
    const menu = (
        <Menu onClick={handleMenuClick}>
            <Menu.Item key="1">导出到Excel</Menu.Item>
        </Menu>
    );
    return (
        <div>
            <Form form={form} name="advanced_search" className="ant-advanced-search-form" onFinish={onFinish} >
                <Row gutter={24}>
                    <Col span={8} key='shopName'>
                        <Form.Item name='shopName' label='名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称' >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8} key='tel'>
                        <Form.Item name='tel' label='手机号'>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8} key='managerName'>
                        <Form.Item name='managerName' label='负责人'  >
                            <Input />
                        </Form.Item>
                    </Col>
                    {expand ? <Col span={8} key='idCard'>
                        <Form.Item name='idCard' label='身份证号'  >
                            <Input />
                        </Form.Item>
                    </Col> : null}

                </Row>
                <Row>
                    <Col span={24} style={{ textAlign: 'right' }}>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button style={{ margin: '0 8px' }} onClick={() => { form.resetFields(); }}>
                            重置
                        </Button>
                        <a style={{ fontSize: 12 }} onClick={() => { setExpand(!expand); }} >
                            {expand ? <><UpOutlined />收起</> : <><DownOutlined />展开</>}
                        </a>
                    </Col>
                </Row>
            </Form>
            <>
                <Button type="primary">新增</Button>
                <Button style={{ margin: '20px' }}>删除</Button>
                <Dropdown overlay={menu}>
                    <Button>
                        更多操作 <DownOutlined />
                    </Button>
                </Dropdown>
            </>
            <Table rowSelection={rowSelection} columns={columns} dataSource={chargeList} rowKey='id' pagination={pagination} onChange={handleTableChange} locale={locales} />
        </div>
    )
}
